<template>
  <div class="win">
    <h1 style="text-align: center">恭喜你抽到了{{ prizeGrade }}</h1>
    <h1 style="text-align: center">获得{{ gift }}</h1>
    <div class="container">
      <button @click="close">确认</button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "WinPrize",
        data() {
            return {}
        },
        props: ["prizeGrade", "gift"],

        methods: {
            close() {
                const showWinPrize = false;
                this.$emit("close", showWinPrize);
            },
        }
    }


</script>

<style scoped>
  h1 {
    text-align: center;
    line-height: 50px;
  }
  .win {
    width: 500px;
    height: 300px;
    border: 25px solid #553201;
    border-radius: 30px;
    background-color: rgb(246, 239, 201);
    position: absolute;
    top: 200px;
    left: 300px;
    z-index: 10;
  }

  .container {
    text-align: center;
  }

  button {
    width: 100px;
    height: 40px;
    border-radius: 20px;
  }
</style>